{{!
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
}}
<div class="panel panel-default">
  <div class="panel-heading" id="sla-accordion" data-toggle="collapse" data-parent="#sla-accordion" data-target="#{{collapseId}}">
      SLA <span class="grayed">({{if slaEnabled "Enabled" "Disabled"}})</span>
      <i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
    </div>
    <div id="{{collapseId}}" class="panel-collapse collapse panel-body">
      <div class="form-group">
        <label class="control-label col-xs-2">Enabled</label>
        <span class="col-xs-2 paddingtop7">{{input type="checkbox" checked=slaEnabled}}</span>
      </div>
      {{#date-with-expr required=true inputName="nominalTime" label="Nominal Time" inputPlaceholder="Nominal Time" dateField=slaInfo.nominalTime}}{{/date-with-expr}}
      <div class="form-group">
        <label class="control-label col-xs-2">Should Start</label>
        <div class="col-xs-3">
          {{input class="form-control" type="text" value=slaInfo.shouldStart.time placeholder="Time period(eg. 5)" title="Time period in minutes/hours/days"}}
          {{field-error model=this field='slaInfo.shouldStart.time' showErrorMessage=showErrorMessage}}
        </div>
        <div class="col-xs-2">
          <select class="form-control" name="time-unit" title="Time Unit" onchange={{action (mut slaInfo.shouldStart.unit) value="target.value"}}>
            {{#each timeUnitOptions as |timeUnit|}}
              <option value={{timeUnit.value}} selected={{eq timeUnit.value slaInfo.shouldStart.unit}}>{{timeUnit.displayName}}</option>
            {{/each}}
          </select>
          {{field-error model=this field='slaInfo.shouldStart.unit' showErrorMessage=showErrorMessage}}
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-xs-2">Should End<span class="requiredField">&nbsp;*</span></label>
        <div class="col-xs-3">
          {{input class="form-control" type="text" value=slaInfo.shouldEnd.time placeholder="Time period(eg. 5)" title="Time period in minutes/hours/days"}}
          {{field-error model=this field='slaInfo.shouldEnd.time' showErrorMessage=showErrorMessage}}
        </div>
        <div class="col-xs-2">
          <select class="form-control" name="time-unit" title="Time Unit" onchange={{action (mut slaInfo.shouldEnd.unit) value="target.value"}}>
            {{#each timeUnitOptions as |timeUnit|}}
              <option value={{timeUnit.value}} selected={{eq timeUnit.value slaInfo.shouldEnd.unit}}>{{timeUnit.displayName}}</option>
            {{/each}}
          </select>
          {{field-error model=this field='slaInfo.shouldEnd.unit' showErrorMessage=showErrorMessage}}
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-xs-2">Max Duration</label>
        <div class="col-xs-3">
          {{input class="form-control" type="text" value=slaInfo.maxDuration.time placeholder="Time period(eg. 5)" title="Time period in minutes/hours/days"}}
        </div>
        <div class="col-xs-2">
          <select class="form-control" name="time-unit" title="Time Unit" onchange={{action (mut slaInfo.maxDuration.unit) value="target.value"}}>
            {{#each timeUnitOptions as |timeUnit|}}
              <option value={{timeUnit.value}} selected={{eq timeUnit.value slaInfo.maxDuration.unit}}>{{timeUnit.displayName}}</option>
            {{/each}}
          </select>
          {{field-error model=this field='slaInfo.maxDuration.unit' showErrorMessage=showErrorMessage}}
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-xs-2">Alert Events</label>
        {{#each alertEvents as |event|}}
        <div class="paddingtop7 col-xs-2">
          {{input type="checkbox" checked=event.alertEnabled}}{{event.displayName}}
        </div>
        {{/each}}
      </div>
      <div class="form-group">
        <label class="control-label col-xs-2">Alert Emails</label>
        <div class="col-xs-5">
          {{input type="text" class="form-control" name="name" value=slaInfo.alertContact placeholder="Comma seperated Email IDs"}}
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-xs-2">Notification Message</label>
        <div class="col-xs-5">
          {{input type="text" class="form-control" name="name" value=slaInfo.notificationMessage placeholder="Notification Message"}}
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-xs-2">Upstream Apps</label>
        <div class="col-xs-5">
          {{input type="text" class="form-control" name="name" value=slaInfo.upstreamApps placeholder="Upstream Apps"}}
        </div>
      </div>
    </div>
  </div>
